<template>
  <div class="container">
    <div class="content-soon">
      <div class="content-title"><span class="title">即将开始</span>
        <span class="time">
              <span><!--{{timer.Hours}}-->10</span> :
              <span><!--{{timer.minutes}}-->10</span> :
              <span><!--{{timer.seconds}}-->10</span>
      </span>
      </div>
      <ul class="Spike--commodity">
        <li class="Spike--commodity_item"  v-for="(item,key) in timeSpike" :key="key">
          <div class="Spike--commodity_left safe__padding">
            <img :src="item.prodImage[0]" alt="">
          </div>
          <div class="Spike--commodity_right safe__padding">
            <span class="commodity_right_suptitle">{{item.prodSupTitle}}</span>
            <span class="commodity_right_suptitle">{{item.prodSubTitle}}</span>
            <span class="commodity_right_suptitle commodity_price">限时价￥{{item.killPrice}}</span>
            <span class="remain commodity_remainNumber">库存剩余:<span class="remainNumber">{{item.remainNumber}}</span>件</span>
            <span class="commodity_right_button">马上抢</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        name: "timeSpikeSoon",
      data(){
        return{
          timeSpike:'',
        }
      },
      mounted(){
        this.$api.secKill().then((data)=>{
          if(data.data.code===10040){
            console.log('获取秒杀成功');
            this.timeSpike=data.data.data;
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    }
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  .content-soon {
    width: 100vw;
    margin-top: 10px;
    height: inherit;
    background: #fff;
    .content-title {
      width: 100vw;
      text-align: center;
      line-height: 82px;
      font-size: 0;
      border-bottom: 1px solid #f3f3f3;
      .title {
        line-height: 82px;
        color: #ec913b;
        font-size: 30px;
      }
      .time {
        display: inline-block;
        padding-left: 20px;
        font-size: 24px;
        text-align: center;
        span {
          background-color: #333;
          color: #fff;
          padding: 5px;
          border-radius: 12px;
          font-size: 24px;
        }
      }
    }
    .Spike--commodity{
      .Spike--commodity_item{
        height: 230px;
        width: 100vw;
        display: block;
        overflow: hidden;
        [class*=Spike--commodity_]{
          display: inline-block;
          width: 65%;
          height: 230px;
          box-sizing: border-box;
          float: left;
        }
        .Spike--commodity_left{
          width: 35%;
          vertical-align: middle;
          img{
            width: 200px;
            height: 200px;
            line-height: 230px;
          }
        }
        .commodity_right_suptitle{
          display: block;
          line-height: 40px;
          /*  overflow: hidden;
            text-overflow: ellipsis;*/
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .commodity_price{
          font-size: 24px;
          color: #e1463c;
        }
        .commodity_remainNumber{
          display: inline-block;
          width: auto;
          float: left;
          color: #9f9f9f;
          font-size: 20px;
          .remainNumber{
            color: #f0922e;
          }
        }
        .commodity_right_button{
          float: right;
          display: inline-block;
          width: 194px;
          border-radius: 28px;
          background: #f0922e;
          text-align: center;
          line-height: 56px;
          font-size: 28px;
          color: #fff;
        }
      }
    }
  }
  .safe__padding{
    padding-top:30px;
    padding-left: 30px;
    box-sizing: border-box;
    padding-right: 30px;
  }
</style>
